<template>
    <div class="components-container">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>   
            <el-form class="formInline" label-width="90px" slot="form">  
                <el-row> 
                    <el-col :span="8">
                        <el-button @click="thisMonth">本月</el-button>
                        <el-button @click="lastMonth">上月</el-button>
                        <el-button @click="checkAll">查看全部</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请日期："> 
                            <el-col :span="11">
                                <el-date-picker v-model="startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="dateChange1" style="width:100%">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="2" align="center">至</el-col>
                            <el-col :span="11">
                                <el-date-picker v-model="endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="dateChange2" style="width:100%">
                                </el-date-picker>
                            </el-col>             
                        </el-form-item>
                    </el-col>
                </el-row>    
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table ref="singleTable" :data="dataApply" style="width:100%" border @selection-change="handleSelectionChange" v-loading="loading">
                                    
                <el-table-column label="申请时间" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime || '--'}}</span>
                    </template> 
                </el-table-column>
                <!-- <el-table-column label="完成时间" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStatus=='1' || scope.row.sStatus=='3' ? '--' : scope.row.sUpdateTime}}</span>
                    </template>
                </el-table-column> -->

                <el-table-column label="结算区间" align="center" min-width="120">
                    <template scope="scope">
                        <span>{{scope.row.sBeginTime+' ~ '+scope.row.sEndTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="结算金额（元）" align="center">
                    <template scope = "scope">
                        <!-- {{scope.row.sStatus | filter}} -->
                        {{scope.row.sMoney === null? '-': scope.row.sMoney}}
                    </template>
                </el-table-column>

                <el-table-column label="处理结果" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.sStatus=='1' || scope.row.sStatus=='3'">处理中</span>
                        <span v-if="scope.row.sStatus=='2'">已驳回</span>
                        <span v-if="scope.row.sStatus=='0'">已结算</span>
                        <span v-if="scope.row.sStatus==''">--</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" align="left" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goToReviseRole(scope.row.pId)">查看明细</el-button>
                    </template>
                </el-table-column>                           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>            
        </TableLayout>    
  </div>
</template>
 
<script>
import { pageSettlement } from 'api/oneCardSolution';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
export default {
    components: { TableLayout, startDate, endDate },
    data() {
        return {
            startDate: '',
            endDate: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            status: '',
            dataRange: '',
            dataApply: [],
            loading: true,
            listQuery: {
        // 分页
                page: 1,
                total: 0
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['schoolId'])
    },
    created() {
        this.searchFetchData();
    },
//   filters: {
//     filter: function(value) {
//       switch (value) {
//         case "1000":
//           return "暂未处理转账";
//           break;
//         case "1001":
//           return "向银行发出转账申请";
//           break;
//         case "1002":
//           return "银行正在处理，请稍后查询";
//           break;
//         case "1003":
//           return "查询失败，请手动刷新查询";
//           break;
//         case "1004":
//           return "银行转账成功";
//           break;
//         case "1005":
//           return "转账失败，请处理";
//           break;
//         case "1006":
//           return "本笔交易需由【人工】转账";
//           break;
//         case "1007":
//           return "线下转账失败";
//           break;
//         case "1008":
//           return "线下转账成功";
//           break;
//         default:
//           return "--";
//       }
//     }
//   },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            if (this.endDate != '' && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions2 = {
                disabledDate(time) {
                    return (
            time.getTime() < new Date(date).getTime() - 864e5 ||
            time.getTime() > Date.now()
                    );
                }
            };
        },
        dateChange2(date) {
            if (this.endDate != '' && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions1 = {
                disabledDate(time) {
                    return (
            time.getTime() > new Date(date).getTime() ||
            time.getTime() > Date.now()
                    );
                }
            };
        },

    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData() {
            this.loading = true;
            let startDate =
        this.startDate == ''
          ? ''
          : moment(this.startDate).format('YYYY-MM-DD') + ' 00:00:00';
            let endDate =
        this.endDate == ''
          ? ''
          : moment(this.endDate).format('YYYY-MM-DD') + ' 23:59:59';
            pageSettlement(
        this.listQuery.page,
        this.config.pageSize,
        this.schoolId,
        startDate,
        endDate
      ).then(response => {
          this.dataApply = response.data.content.list;
          this.listQuery.total = response.data.content.pagination.total;
          this.loading = false;
      });
        },
        thisMonth() {
            const day = new Date();
            const daycount = day.getDate();
            const month = day.getMonth() + 1;
            const year = day.getFullYear();
            const startTime = year + '-' + month + '-1';
            const endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);
        },
        lastMonth() {
            let day = new Date();
            let month = day.getMonth();
            let year = day.getFullYear();
            if (month == 0) {
                month = 12;
                year = year - 1;
            }
            let daycount = new Date(year, month, 0).getDate();
            let startTime = year + '-' + month + '-1';
            let endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);
        },
        checkAll() {
            this.startDate = '';
            this.endDate = '';
            this.searchFetchData();
        },
        goToReviseRole(pId) {
            this.$router.push({
                path: `checkDetails/${pId}`
            });
        }
    }
};
</script>
 
<style scoped>
.components-container {
  width: 100%;
  margin: 20px 0;
}
.block {
  padding-bottom: 10px;
}
.el-row {
  background: #fff;
  line-height: 32px;
  border-radius: 3px;
}
</style>